<!DOCTYPE html>

<html>

<head>
    <title></title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id="app-11">
        <h1>我是父组件的标题</h1>
        <child-component>
            <p>这是一些初始内容</p>
            <p>这是更多的初始内容</p>
        </child-component>
    </div>
    <script>
        Vue.component('child-component', {
            template: '\
                    <div>\
                        <h2>我是子组件的标题</h2>\
                        <slot>\
                            只有在没有要分发的内容时才会显示。\
                        </slot>\
                    </div>\
                    ',
        });
        // 创建根实例
        new Vue({
            el: '#app-11',
        })
    </script>
</body>


</html>